@import "../../assets/scss/core/base";

$time-prefix-cls: #{$jigsaw-prefix}-time;

.#{$time-prefix-cls}-host {
    @include inline-block();
    width: 250px;
    border: 1px solid $border-color-base;
    border-radius: $border-radius-base;
    padding: 5px;
    background: #fff;
    &.#{$time-prefix-cls}-error {
        border-color: $error-color;
    }
    .#{$time-prefix-cls}-box {
        width: 100%;
        .bootstrap-datetimepicker-widget table {
            th, .year, .day, .month {
                font-weight: 400;
            }
            tr {
                td {
                    &.disabled, span.disabled {
                        @include compatible(color, $disabled-color, $disabled-color-ie11);
                    }
                    &.today:before {
                        display: none;
                    }
                }
                td, td span {
                    &.expect-day {
                        border-radius: 0;
                        &.border-left {
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                        }
                        &.border-right {
                            border-top-right-radius: 4px;
                            border-bottom-right-radius: 4px;
                        }
                        &:last-child {
                            border-top-right-radius: 4px;
                            border-bottom-right-radius: 4px;
                        }
                        &:first-child {
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                        }
                        &:not(.active) {
                            background-color: lighten($primary-color, 30%);
                            color: #666;
                            &:hover {
                                background: $primary-color;
                                color: #fff;
                            }
                        }
                    }
                }
                &.active {
                    background-color: transparent;
                    td {
                        background-color: $primary-color !important;
                        border-radius: 0 !important;
                        color: #fff;
                        &:first-child {
                            -webkit-border-radius: 4px 0 0 4px !important;
                            -moz-border-radius: 4px 0 0 4px !important;
                        }
                        &:last-child {
                            -webkit-border-radius: 0 4px 4px 0 !important;
                            -moz-border-radius: 0 4px 4px 0 !important;
                        }
                        &.today:before {
                            display: none;
                        }
                        &.expect-day {
                            background: #3ab1ea;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
    .#{$time-prefix-cls}-granularity {
        display: flex;
        justify-content: center;
        & > span {
            font-size: 12px;
            display: inline-block;
            height: 26px;
            line-height: 26px;
            padding: 0 10px;
            border: 1px solid $primary-color;
            border-right: 0;
            color: $primary-color;
            cursor: pointer;
            &:first-child {
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }
            &:last-child {
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                border-right: 1px solid $primary-color;
            }
            &.active {
                background-color: $primary-color;
                color: #fff;
            }
        }
    }
}

